<!doctype html>
<html>
  <head>
    <title>axios - transform response example</title>
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
  </head>
  <body class="container">
    <h1>transformResponse</h1>

    <div class="row">
      <img id="useravatar" src="" class="col-md-1"/>
      <div class="col-md-3">
        <strong id="username"></strong><br/>
        Created: <span id="created"></span><br/>
        Updated: <span id="updated"></span>
      </div>
    </div>
 
    <script src="/axios.min.js"></script>
    <script>
      var ISO_8601 = /(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}:\d{2})Z/;
      function formatDate(d) {
        return (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
      }

      axios.get('https://api.github.com/users/mzabriskie', {
          transformResponse: axios.defaults.transformResponse.concat(function (data, headers) {
            Object.keys(data).forEach(function (k) {
              if (ISO_8601.test(data[k])) {
                data[k] = new Date(Date.parse(data[k]));
              }
            });
            return data;
          })
        })
        .then(function (res) {
          document.getElementById('useravatar').src = res.data.avatar_url;
          document.getElementById('username').innerHTML = res.data.name;
          document.getElementById('created').innerHTML = formatDate(res.data.created_at);
          document.getElementById('updated').innerHTML = formatDate(res.data.updated_at);
        });
    </script>
  </body>
</html>
